<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Math homework</title>
        <!-- <script src="vue.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
        <style type="text/css">
        body {
           font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; 
        }
        #app {
            width: 40em;
            margin: 0 auto;
        }
        div.config {
           width: 20em;
           float: left;
        }
        div.result {
           width: 20em;
           float: right;
        }
        table.config {
            margin: 0;
            padding: 0;
            margin-bottom: 0.2em;
            border-collapse: collapse;
            border: 1px solid black;
        }
        table.config tr, table.config th, table.config td {
            margin: 0;
            padding: 0;
            border: 1px solid black;
        }
        table.config td {
            padding: 3px;
            width: 3em;
            text-align: center;
        }
        table.result, table.result tr {
            margin: 0;
            padding: 0;
            border: 0;
        }
        table.result td {
            text-align: right;
        }
        .small-text-box {
            text-align: right;
            width: 4em;
        }
        h2 {
            text-align: center;
        }
        .seq {
            text-align: right;
            background-color: #F7F7F7;
            color: #999999;
            padding-right: 0.5em;
        }
        </style>
    </head>
    <body>
        <div id="app">
            <h2>小学数学家庭作业</h2>
            <div class="config">
                <table class="config">
                    <tr>
                        <td></td>
                        <td>最小值</td>
                        <td>最大值</td>
                    </tr>
                    <tr>
                        <td>算数</td>
                        <td><input type="text" v-model.number="x.min" class="small-text-box"/></td>
                        <td><input type="text" v-model.number="x.max" class="small-text-box"/></td>
                    </tr>
                    <tr>
                        <td>结果</td>
                        <td><input type="text" v-model.number="z.min" class="small-text-box"/></td>
                        <td><input type="text" v-model.number="z.max" class="small-text-box"/></td>
                    </tr>
                </table>
                <table class="config">
                    <tr>
                        <td>运算</td>
                        <td>个数</td>
                    </tr>
                    <tr v-for="op in op_list">
                        <td>{{ op }}</td>
                        <td><input type="text" v-model.number="op_n[op]" class="small-text-box"/></td>
                    </tr>
                </table>
                <table class="config">
                    <tr>
                        <td>连算</td>
                        <td><input type="text" v-model.number="op_n_per_q" class="small-text-box"/></td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td><button class="button" @click="gen_homework">生成题目</button></td>
                        <td><button class="button" @click="show_res = show_res ? false : true">显示答案</button></td>
                    </tr>
                </table>
            </div>
            <div class="result">
                <table class="result">
                    <tr v-for="q in qs">
                        <td class="seq">
                            {{ q.n }}
                        </td>
                        <td v-for="c in q.q">
                            {{ c }}
                        </td>
                        <td>=</td>
                        <td v-if="show_res">
                            {{ q.r }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </body>
    <script type="text/javascript">
        var data = {
            x: {min: 10, max: 100},
            z: {min: 10, max: 100},
            op_list: ['+', '-'],
            op_n: {'+': 5, '-': 5},
            op_n_per_q: 1,
            qs: [],
            show_res: false,
        };
        var app = new Vue({
            el: '#app',
            data: data,
            computed: {
            },
            methods: {
                gen_homework: function() {
                    var self = this;
                    var op_list = [];
                    for (var i=0;i<self.op_list.length;i++) {
                        var op = self.op_list[i];
                        var n = self.op_n[op];
                        if (n == 0) {
                            continue;
                        }
                        op_list = op_list.concat(Array(n).fill(op));
                    }
                    shuffle(op_list);
                    q_list = [];
                    var num = 0;
                    for (var i=0;i<op_list.length;i+=self.op_n_per_q) {
                        num += 1;
                        var q = gen_q(self.x, self.z, op_list.slice(i, i+self.op_n_per_q));
                        q.n = num;
                        q_list.push(q);
                    }
                    while (self.qs.length>0) {
                        self.qs.pop();
                    }
                    for (var i=0;i<q_list.length;i++) {
                        self.qs.push(q_list[i]);
                    }
                }
            }
        });
        function gen_q(x, z, op_list) {
            // while (true) {
            for (var i=0;i<1000;i++) {
                var q = [];
                var bad = false;
                q.push(randint(x.min, x.max));
                for (var opi=0;opi<op_list.length;opi++) {
                    q.push(op_list[opi]);
                    q.push(randint(x.min, x.max));
                    r = eval(q.join(" "));
                    if (!(z.min <= r && r <= z.max)) {
                        bad = true;
                        break;
                    }
                }
                if (!bad) {
                    break;
                }
            }
            return {q: q, r: r};
        }
        function randint(min, max) {
            return Math.round(Math.random()*(max - min) + min);
        }
        // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
        function shuffle(array) {
            var currentIndex = array.length, temporaryValue, randomIndex;

            // While there remain elements to shuffle...
            while (0 !== currentIndex) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
            }

            return array;
        }

    </script>
</html>